iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0

在Hooks出來以後其實state似乎可以不用學,hooks完全取代了,但還是學一下他的原理,這樣比較好記

原本寫法

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : 0
      }


    goClick(e){
        this.setState({
            gonum : this.state.gonum+1
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick.bind(this)}>點我</button>
            </div>
        )
    }
}

使用hooks

import React, { useState }  from 'react'


export default function App3() {
    const [gonum, goClick] = useState(0);
    return (
        <div>
            <p>{gonum} </p>
            <button onClick={() => goClick(gonum + 1)}>點我</button>
        </div>
    )
}


這邊hooks我新創了一個檔案App3.js來寫,你會發現它的寫法簡潔很多,原本class XXXX extends Component,直接用function函數來取代,事件也不用在加一推this。

實例

把上章寫的內容都改成hooks,不知道有沒有更好的寫法

上章

import React, { Component } from 'react'

export default class App2 extends Component {

      state = {
        gonum : 0,
        gonoyes:false
      }


    goClick(e){
 
         this.setState({
            gonum : this.state.gonum+1 ,
            gonoyes : !this.state.gonoyes
        })
    }
    render() {
        return (
            <div>
                <p>{ this.state.gonum }</p>
                <button onClick={this.goClick.bind(this)}>{this.state.gonoyes ? 'No' : 'Yes'}</button>
            </div>
        )
    }
}

hooks

import React, { useState }  from 'react'


export default function App3() {
    const [gonum, gocnum] = useState(0);
    const [gotext, gonoyes] = useState(false);

    const goClick=()=>{
        gocnum(gonum+1);
        gonoyes(!gotext);
    }
    return (
        <div>
            <p>{gonum} </p>
            <button onClick={goClick}>{gotext ? 'No' : 'Yes'}</button>
        </div>
    )
}

https://ithelp.ithome.com.tw/upload/images/20200910/20110292dRiDHoltz0.png


上一篇
day 9 其他bind() 的使用方式
下一篇
day 11 開始寫畫面 幫Create React App裝個sass
系列文
react.js 的學習筆記 (沒在用硬要學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言